<script>
import { ElMessage } from 'element-plus';

import { Back, Plus } from '@element-plus/icons-vue'
// import { addItem,datalist } from '@/api/yxd'
export default {
    data() {
        return {
            radio: 3,
            FormData:{
            textarea: '',
            imageUrl: '',
            names:'',
            time:'2023/3/18',
            head:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F16%2F20210116225104_9d860.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681563227&t=a51e7ec40617d5e5bf64fad909d04ad7'
            }
          
        }
    },
    components: {
        Back,
        Plus
    },
    methods: {

        httpRequest(options){
            console.log(options);
            this.FormData.imageUrl = URL.createObjectURL(options.file)
            // let reader = new FileReader()
            // reader.readAsDataURL(options.file)

            // reader.onload = () =>{
            //     this.imageUrl = reader.result
                // this.formData.img = reader.result
            // }
        },
        back() {
            // console.log(this.$router);
            // this.$router.go(-1)
            this.$router.push('/yxd/sh/GradeIndex/ff')
            // localStorage.setItem(名,值)
            // localStorage.getItem('名')

        },
        addClick() {
            localStorage.setItem('str',this. FormData.textarea)
            localStorage.setItem('img',this. FormData.imageUrl)
            localStorage.setItem('names',this. FormData.names)
            localStorage.setItem('ddtime',this. FormData.time)
            localStorage.setItem('headSculpture',this. FormData.head)


            ElMessage.success('发布成功')

        //     addItem(this.FormData).then(res=>{
        //         // console.log(res);
        //         datalist().then(res=>{
        //             console.log(res);
        //         })
           
        //     // console.log(this. FormData.imageUrl+'111');
           

        // //         if (res.code == '200') {
         
        // //   // 提交成功后进入到轮播图列表页面
         
        // // }

        //     })
        } 
    }
}          
</script>


<template>
    <el-button circle><el-icon @click="back">
            <Back />
        </el-icon></el-button>

    <!-- <el-radio-group v-model="radio">
        <el-radio :label="3">全校</el-radio>
        <el-radio :label="6">全部班级</el-radio>
        <el-radio :label="9">全部教师</el-radio>
        <el-radio :label="12">指定班级</el-radio>
    </el-radio-group> -->
    <el-form-item label="发布人姓名 :"  >
        <el-input style="width:auto" v-model="FormData.names"></el-input>
    </el-form-item>
   <el-form-item  label="内容 :" ><el-input v-model="FormData.textarea" :rows="10" type="textarea"
            placeholder="写下精彩瞬间" /></el-form-item> 
    <el-form-item label="请选择图片" >
        <el-upload class="avatar-uploader" :http-request="httpRequest" :multiple="true">
            <img v-if="FormData.imageUrl" :src="FormData.imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
            </el-icon>
        </el-upload>
    </el-form-item>
    <el-button @click="addClick">发布</el-button>
</template>
<style lang="scss" scoped>
.el-radio-group {
    display: flex;
    margin-top: 40px;
    color: black;

    .el-radio-label {
        color: black;
    }
}
.push {
    margin-top: 40px;
}
.contont {
    display: flex;
    margin-top: 60px;
}
.el-form-item{
    margin-top: 40px;
    margin-left: 50px;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    // padding-top: 20px;
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    border: 1px solid black;
}
</style>






